<!-- 商品详情 -->
<template>
	<view class="detail-wrap ">
		<!-- 标题栏 -->
		<view class="nav-box">
			<view class="state-hack"></view>
			<view :style="{ height: navbarHeight + 'px' }">
				<view hover-class="back-hover" class="back-box u-m-x-30 u-flex u-row-center u-col-center" @tap="goBack">
					<view class="u-iconfont uicon-arrow-left" style="color: #fff;font-size: 28rpx;"></view>
				</view>
			</view>
		</view>

		<!-- 缺省页 -->
		<shopro-empty v-if="showEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods_null.png'" :tipText="showEmptyText" btnText="返回上一页" @click="$Router.back()"></shopro-empty>
		<view class="detail_box" v-else>
			<view class="detail-content">
				<!-- 轮播 -->
				<u-swiper :height="750" borderRadius="0" :list="goodsInfo.slideshows" indicator-pos="bottomRight" mode="number" :interval="3000" @click="onGoodsSwiper"></u-swiper>

				<!-- 价格卡片组 -->
				<!-- <sh-price-card v-if="goodsInfo.id" :detail="goodsInfo" type="express"></sh-price-card> -->
				
				<!-- 标题 -->
				<view class="u-m-b-10 title-box u-p-20 u-skeleton-fillet">
					<view class="goods-title u-m-b-10 u-ellipsis-2">{{ goodsInfo.tit }}</view>
					<view class="goods-title u-m-b-10 u-ellipsis-2" style="color: red; font-size: 50rpx';">￥{{ goodsInfo.price }} </view>
					<!-- <view class="sub-title u-ellipsis-2" style="color: #999;">送运费险</view> -->
				</view>
				<!-- 规格选择 -->
				<view class="sku-box" @tap="showSku = true">
					<view class="u-flex u-row-between u-col-center">
						<view class="u-flex">
							<text class="title">规格</text>
							<text class="tip">{{ currentSkuText || '请选择规格' }}</text>
						</view>
						<text class="u-iconfont uicon-arrow-right" style="color: #bfbfbf;"></text>
					</view>
				</view>
				 <view>
				 	<swiper  class="swiper_box" autoplay indicator-dots :current="explainSwiper.current"  interval="4000"
				 	 circular duration="200">
				 	 <swiper-item v-for="(item, index) in explainSwiper.list" :key="index">
				 	  <view class="explain_min">
				 		 <image mode="scaleToFill" class="explain_min_di" :src="$IMAGE_URL + '/detail_di.png'" />
				 		 <view class="explain_min_posZin">
				 		   <view class="explain_min_tit">{{$APP_NAME}}</view>
				 		   <view class="explain_min_text">{{$APP_NAME}}{{item.text}}</view>
				 		   <view class="explain_min_di_img">
				 			 <image mode="scaleToFill" style="width:100%;height: 100%;border-radius:10rpx;" :src="item.conUrl" />
				 		   </view>
				 		 </view>
				 	   </view>
				 	 </swiper-item>
				 	</swiper>
				</view>
					<!-- 选项卡 -->
					<view class="tab-box u-flex">
						<view class="tab-item u-flex-col u-row-center u-col-center" @tap="onTab(tab.id)" v-for="tab in tabList" :key="tab.id">
							<view class="tab-title">
								{{ tab.title }}
								<text v-if="tab.id == 'tab2'" class="comment-num">({{ commentNum }})</text>
							</view>
							<text class="tab-line" :class="{ 'line-active': tabCurrent === tab.id }"></text>
						</view>
					</view>
					<view class="tab-detail u-p-20 u-m-b-10">
					
						<!-- 详情图片 -->
						<view class=" " v-if="tabCurrent === 'tab0'">
							<image v-for="item in detailImgArr" style="width:100%; display: block;" mode="widthFix" :src="item" />
						
							<!-- <image mode="widthFix" style="width: 100%;" :src="$IMAGE_URL + '/mosun.png'"></image> -->
						</view>
						<view class="rich-box" v-if="tabCurrent === 'tab1'"><u-parse :html="goodsInfo.content"></u-parse></view>
						<!-- 评价 -->
						<!-- <view class="goods-comment" v-if="tabCurrent === 'tab2'">
							<block v-for="comment in commentList" :key="comment.id"><sh-comment :comment="comment"></sh-comment></block>
							<shopro-empty v-show="!commentList.length" marginTop="20rpx" :image="$IMG_URL + '/imgs/empty/comment_empty.png'" tipText="暂无评价~"></shopro-empty>
							<view class="more-box u-flex u-row-center u-col-center" v-show="commentNum > 3">
								<button class="u-reset-button more-btn u-flex u-row-center u-col-center" @tap="jump('/pages/goods/comment/comment-list', { goodsId: goodsInfo.id })">
									查看全部
									<view class="u-iconfont uicon-arrow-right" style="color:#d5a65a ;font-size: 28rpx;"></view>
								</button>
							</view>
						</view> -->
					</view>
				</view>

			<view class="tabbar-foot safe-area-inset-bottom" v-if="goodsInfo.id">
				<view class="detail-foot_box safe-area-inset-bottom  u-flex u-col-ceter u-row-around">
					<!-- foot左侧 -->
					<view class="left u-flex">
						<!-- 积分foot -->
						<view class="tools-item u-flex-col u-row-center u-col-center" @tap="goHome">
							<image class="tool-img shopro-selector-circular" :src="$IMAGE_URL + '/home.png'" mode=""></image>
							<text class="tool-title shopro-selector-rect">首页</text>
						</view>
						<block>
							<view class="tools-item u-flex-col u-row-center u-col-center" @tap="callPhone()">
								<image
									class="tool-img"
									:src="$IMAGE_URL + '/customer.png'"
									mode=""
								></image>
								<text class="tool-title">客服</text>
							</view>
						<!-- 	<view class="tools-item u-flex-col u-row-center u-col-center" @tap="onShare">
								<image class="tool-img" :src="$IMG_URL + '/imgs/share/share.png'" mode=""></image>
								<text class="tool-title">分享</text>
							</view> -->
						</block>
					</view>
					<!-- foot右侧 -->
					<view class="detail-right">
						<!-- 积分按钮 -->
						<!-- <view class="detail-btn-box" v-if="detailType === 'score'"><button class="u-reset-button  score-btn" @tap="goPay">立即兑换</button></view> -->
						<view v-if="detailType !== 'score'">
							<!-- 正常按钮 -->
							<view class="detail-btn-box u-row-around">
								<button class=" u-reset-button  purchase-btn" :style="{'background':'linear-gradient(352deg, '+$COLOR+' 0%, '+$CHANGEA+' 100%)'}"  @tap="goPay(goodsInfo)">
									立即购买
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 规格弹窗 -->
			<shopro-sku
				v-if="showSku && goodsInfo.id"
				v-model="showSku"
				:goodsInfo="goodsInfo"
				@changeType="changeType"
				@getSkuText="getSkuText"
			></shopro-sku>
			
			<!-- 	分享组件 -->
			<shopro-share v-model="showShare" :posterInfo="goodsInfo" :posterType="'goods'"></shopro-share>
			<!-- 登录 -->
			<shopro-auth-modal v-if="authType"></shopro-auth-modal>
		</view>
	</view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync();
// import shActivity from './components/sh-activity.vue';
import shPriceCard from './components/sh-price-card.vue';
// import shServe from './components/sh-serve.vue';
// import shGroupon from './components/sh-groupon.vue';
// import shCoupon from './components/sh-coupon.vue';
// import shComment from './components/sh-comment.vue';
import share from '@/shopro/share';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
		// shServe,
		shPriceCard,
		// shGroupon,
		// shCoupon,
		// shComment,
		// shActivity
	},
	data() {
		return {
			// navbar
			backIconName: 'arrow-left',
			showSku: false, //是否显示规格弹窗
			currentSkuText: '', //选中规格
			detailType: '',
			showShare: false,
			detailImgArr:[],
			buyType: 'sku',
			grouponBuyType: 'alone', //拼团购买方式。
			showEmpty: false,
			showEmptyText: '',
			showServe: false,
			goodsInfo: {},
			commentList: [], //商品评价列表
			commentNum: 0, //商品评价总数
			favorite: false,
			activityRules: {},
			currentSkuList: [],
			confirmGoodsInfo: {},
			swiperCurrent: 0, //轮播下标
			tabCurrent: 'tab0',
			tabList: [
				{
					id: 'tab0',
					title: '商品详情'
				},
				// {
				// 	id: 'tab1',
				// 	title: '问题说明'
				// },
				// {
				// 	id: 'tab2',
				// 	title: '用户评价'
				// }
			],
			combo:{
				cobIndex:0, // 套餐
				terIndex:0, // 租期
				verIndex:0, // 版本
				colIndex:0, // 颜色
				insIndex:0, // 碎屏
			},
			explainSwiper:{
				current: 0,
				list:[
					{conUrl: 'https://jijiangjun.oss-cn-hangzhou.aliyuncs.com/upload/20240515/59343ab3b2d446f79ea835fd6f39bded.png',text:'先向后付说明'},
					// {conUrl: this.$IMAGE_URL+'/detail_di_min2.png',text:'平台租凭说明'},
					// {conUrl: this.$IMAGE_URL+'/detail_di_min3.png',text:'平台租凭说明'},
					// {conUrl: this.$IMAGE_URL+'/detail_di_min4.png',text:'平台租凭说明'},
				],
			},
		};
	},
	// 是否登录
	computed: {
		...mapGetters(['isLogin', 'authType']),
		navbarHeight() {
			// #ifdef APP-PLUS || H5
			return 48;
			// #endif
			// #ifdef MP
			let height = systemInfo.platform == 'ios' ? 44 : 48;
			return height;
			// #endif
		}
	},
	async onLoad() {
		// let that = this;
		// this.backIconName = getCurrentPages().length > 1 ? 'arrow-left' : 'home-fill';
		// const type = this.$Route.query.type;
		// this.detailType = type;
		await this.getGoodsDetail().then(res => {
			console.log('load',res)
		});
		
		
	},

	onUnload() {
		share.setShareInfo();
	},

	methods: {
		// goBack 返回
		// 微信直播商品跳转详情，需要用小程序原生接口才能返回。
		goBack() {
			let pageList = getCurrentPages();
			if (pageList.length > 1) {
				// #ifdef MP-WEIXIN
				wx.navigateBack();
				// #endif
				// #ifndef MP-WEIXIN
				uni.navigateBack();
				// #endif
			} else {
				this.$Router.replaceAll('/pages/index/index');
			}
		},
		callPhone() {
			uni.makePhoneCall({
				phoneNumber:this.$PLANE_PHONE,
				success:function(){
					console.log('拨打电话成功');
				},
				fail() {
					console.log('打电话失败了');
				}
			})
		},
		// 轮播图预览
		onGoodsSwiper(e) {
			this.$tools.previewImage(this.goodsInfo.slideshows, e);
		},
		// getActivityRules(e) {
		// 	if (e) {
		// 		this.activityRules = JSON.parse(e);
		// 	}
		// },
		// 检测
		// checkActivity(data, type) {
		// 	if (data) {
		// 		return !data.includes(type);
		// 	}
		// 	return true;
		// },
		// 路由跳转
		jump(path, parmas) {
			this.showShare = false;
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 回到首页
		goHome() {
			this.$Router.replaceAll('/pages/index/index');
		},

		// 选项卡
		onTab(id) {
			this.tabCurrent = id;
			console.log(id)
		},
		// 商品详情
		getGoodsDetail() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$http(
					'goods.detail',
					{
						id: that.$Route.query.id
					},
					'',
					false
				).then(res => {
					console.log("res",res)
					if (res.code === 200) {
						 let html = res.data.content
						
						// 只保留图片
						let data = [];
						if(html!=null){
							html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
							  data.push(capture);
							});
						}
						console.log('商品图片',res.data)
						this.detailImgArr = data
						console.log('商品图片',this.detailImgArr)
						that.showEmpty = false;
						that.goodsInfo = res.data;
						that.goodsInfo.params = this.setSkuLayout(JSON.parse(that.goodsInfo.params))
						that.goodsInfo.slideshows = JSON.parse(that.goodsInfo.slideshows)
						that.goodsInfo.img = that.goodsInfo.slideshows[that.goodsInfo.slideshows.length-1]
						that.goodsInfo.colors = JSON.parse(that.goodsInfo.colors)
						that.goodsInfo.category = JSON.parse(that.goodsInfo.category)
						if(that.$Route.query.click_id){
							that.goodsInfo.clickId =  that.$Route.query.click_id
							console.log('clickId',that.goodsInfo.clickId)
						}
						
						that.combo.cobIndex = that.goodsInfo.params.length-1
						console.log('商品详情',that.goodsInfo.params)
						console.log('商品详情价格',that.goodsInfo.params[0].term_list[0].specifications[0].sellPrice)
						var	allNum = (that.goodsInfo.params[0].term_list[0].specifications[0].sellPrice / 100).toFixed(2)
						that.goodsInfo.price = allNum
						if (that.goodsInfo.activity_type) {
							that.activityRules.status = that.goodsInfo.activity.status_code;
						}
						share.setShareInfo({
							title: that.goodsInfo.title,
							desc: that.goodsInfo.subtitle,
							image: that.goodsInfo.image,
							params: {
								page: 2,
								pageId: that.$Route.query.id
							}
						});
						// that.getCommentList();
						resolve(res.data);
					} else {
						resolve(false);
						// that.$u.toast(res.msg);
						that.showEmpty = true;
						that.showEmptyText = res.msg;
					}
				});
			});
		},
		// 商品评论
		// getCommentList() {
		// 	let that = this;
		// 	that.$http('goods.commentList', {
		// 		goods_id: that.goodsInfo.id,
		// 		per_page: 3,
		// 		type: 'all'
		// 	}).then(res => {
		// 		if (res.code === 1) {
		// 			that.commentList = res.data.data;
		// 			that.commentNum = res.data.total;
		// 		}
		// 	});
		// },
		// 组件返回的type;
		setSkuLayout(params) {
		    let arr = params;
		    
		    arr.forEach(itemA => {
		      let numArr = [];
		      itemA.term_list.forEach((itemB,indexB) => {
		        if(itemB.termHide == '1'){
		          numArr.push(indexB)
		        }
		      })
		      if(numArr.length>0){
		        for(let i=numArr.length-1; i>=0; i--){
		          itemA.term_list.splice(numArr[i],1)
		        }
		      }
		    })
		
		    arr.forEach(itemA => {
		      console.log('000',itemA)
		      itemA.term_list.forEach(itemB => {
		        
		        let colorArr = [];
		        itemB.skuObj = [];
		        itemB.specifications.forEach(itemC => {
		          let staNum = colorArr.indexOf(itemC.color);
		          if (staNum == -1) {
		            let obj = {
		              name: itemC.color,
		              list: [itemC]
		            }
		            colorArr.push(itemC.color);
		            itemB.skuObj.push(obj);
		          } else {
		            itemB.skuObj[staNum].list.push(itemC)
		          }
		        })
		      })
		    })
		    return arr
		  },
		// 组件返回的type;
		changeType(e) {
			this.buyType = e;
		},
		// 组件返回的规格;
		getSkuText(e) {
			this.currentSkuText = e;
		},
		// 分享
		onShare() {
			this.showShare = true;
		},
		// 加入购物车
		addCart() {
			if (this.isLogin) {
				// this.buyType = 'cart';
				this.showSku = true;
			} else {
				this.$store.dispatch('showAuthModal');
			}
		},
		// 立即购买
		goPay(val) {
			if (this.isLogin) {
				console.log('购买',val)
				// this.buyType = 'buy';
				this.showSku = true;
			} else {
				// this.$Router.replaceAll('/pages/index/user');
				this.$store.dispatch('showAuthModal');
			}
		},
		// 拼团购买
		// payGroupon(type) {
		// 	if (this.isLogin) {
		// 		if (type === 'groupon') {
		// 			this.grouponBuyType = 'groupon';
		// 		} else {
		// 			this.grouponBuyType = 'alone';
		// 		}
		// 		this.buyType = 'buy';
		// 		this.showSku = true;
		// 	} else {
		// 		this.$store.dispatch('showAuthModal');
		// 	}
		// },

		// 立即秒杀
		// goSeckill() {
		// 	!this.isLogin ? this.$store.dispatch('showAuthModal') : (this.showSku = true);
		// 	this.buyType = 'buy';
		// },

		// 收藏
		// onFavorite(goodsId) {
		// 	let that = this;
		// 	that.$http('goods.favorite', {
		// 		goods_id: goodsId
		// 	}).then(res => {
		// 		if (res.code === 1) {
		// 			that.goodsInfo.favorite = res.data;
		// 			that.$u.toast(res.msg);
		// 		}
		// 	});
		// }
	}
};
</script>

<style lang="scss">
// 标题栏
.nav-box {
	position: fixed;
	width: 100%;
	min-height: 140rpx;
	z-index: 888;
	top: 0;
	.back-box {
		background-color: rgba(#000, 0.18);
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-top: 14rpx;
	}
	.back-hover {
		background-color: rgba(#fff, 0.18);
	}
	.state-hack {
		width: 100%;
		height: var(--status-bar-height);
		/* #ifdef H5 */
		height: 20rpx;
		/* #endif */
	}
}
// 拼团玩法
.groupon-play {
	background: #fff;
	line-height: 94rpx;
	.title {
		font-size: 28rpx;
		color: #999;
	}

	.description {
		font-size: 28rpx;
		width: 500rpx;
		margin-left: 30rpx;
	}
}

// 选项卡
.tab-box {
	height: 102rpx;
	background: #fff;
	border-bottom: 1rpx solid rgba(#dfdfdf, 0.8);
	margin-top: 10rpx;

	.tab-item {
		flex: 1;
		height: 100%;
		position: relative;
		font-size: 30rpx;
		font-weight: bold;

		.tab-line {
			width: 123rpx;
			height: 4rpx;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
			background: transparent;
			position: absolute;
			z-index: 2;
		}

		.line-active {
			background: rgba(168, 112, 13, 1);
		}
	}
}

// 选项卡内容
.tab-detail {
	min-height: 300rpx;
	background: #fff;
	// 规格参数
	.goods-size {
		.table-box {
			width: 710rpx;
			margin: auto;
			background: rgba(255, 255, 255, 1);
			border: 1rpx solid rgba(223, 223, 223, 1);

			.t-tr {
				border-bottom: 1rpx solid rgba(223, 223, 223, 1);
				&:last-child {
					border-bottom: none;
				}

				.t-head {
					font-size: 26rpx;
					color: #999;
					flex: 1;
					padding: 15rpx 20rpx;
					height: 100%;
				}

				.t-detail {
					font-size: 26rpx;
					border-left: 1rpx solid rgba(223, 223, 223, 1);
					flex: 4;
					padding: 15rpx 20rpx;
					height: 100%;
				}
			}
		}
	}
	// 富文本
	.rich-box {
		::v-deep img {
			display: block;
		}
	}
	// 评论
	.goods-comment {
		.more-box {
			height: 100rpx;
			background: #fff;

			.more-btn {
				width: 200rpx;
				line-height: 60rpx;
				border: 1rpx solid rgba(213, 166, 90, 1);
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(168, 112, 13, 1);
				padding: 0;
				background: #fff;
			}
		}
	}
}

// 规格卡片
.sku-box {
	line-height: 82rpx;
	background: #fff;
	padding: 0 20rpx;
	margin: 10rpx 0;
	font-size: 28rpx;

	.title {
		color: #999;
		margin-right: 20rpx;
	}
}

// 标题卡片
.title-box {
	background-color: #fff;
	.goods-title {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 42rpx;
	}

	.sub-title {
		color: #a8700d;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 42rpx;
	}
}

// 底部工具栏
.tabbar-foot {
	min-height: 100rpx;
	width: 100%;
}
// 租赁说明
.swiper_box{
	width: 100%;
	min-height: 550rpx;
	background-color: #ffffff;
}
.explain_min{
  width: 686rpx;
  height: 540rpx;
  position: relative;
  margin: 0 auto;
}
.explain_min_di{
  width: 686rpx;
  height: 494rpx;
}
.explain_min_posZin{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.explain_min_tit{
  font-size: 48rpx;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 66rpx;
  letter-spacing: 1rpx;
  padding: 76rpx 0 0 16rpx;
}
.explain_min_text{
  font-size: 24rpx;
  color: #FFFFFF;
  line-height: 34rpx;
  letter-spacing: 3rpx;
  margin-top: 8rpx;
  padding-left: 16rpx;
}
.explain_min_di_img{
  width: 654rpx;
  height: 272rpx;
  margin: 24rpx auto 0;
}

.explain .a-swiper-dot {
  width: 10rpx;
  height: 10rpx;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5rpx;
}
.explain .a-swiper-dot-active {
  width: 46rpx;
  height: 10rpx;
  /* background: rgba(0, 0, 0, 0.5); */
  background:#FFCB31;
  border-radius: 5rpx;
}
.detail-foot_box {
	min-height: calc(100rpx + env(safe-area-inset-bottom)) ;
	border-top: 1rpx solid rgba(238, 238, 238, 1);
	background-color: #fff;
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: 999;

	.left,
	.detail-right {
		flex: 1;
	}

	.tools-item {
		flex: 1;
		height: 100%;

		.tool-img {
			width: 46rpx;
			height: 46rpx;
		}

		.tool-title {
			font-size: 22rpx;
			line-height: 22rpx;
			padding-top: 8rpx;
		}
	}

	.detail-btn-box {
		flex: 1;

		.tool-btn {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(#fff, 0.9);
			width: 210rpx;
			min-height: 70rpx;
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.price {
				font-size: 24rpx;
				line-height: 24rpx;
				font-weight: bold;
				color: rgba(#fff, 0.9);
			}

			.price-title {
				font-size: 20rpx;
				line-height: 20rpx;
				font-weight: 500;
				color: rgba(#fff, 0.9);
				padding-top: 8rpx;
			}
		}

		.add-btn {
			box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
			background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
		}

		.pay-btn {
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		}

		.score-btn {
			width: 600rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
			box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
			border-radius: 40rpx;
			font-size: 30rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			margin-right: 20rpx;
		}

		.seckill-btn {
			width: 432rpx;
			line-height: 70rpx;
			background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
		}
		
		.purchase-btn {
			width: 432rpx;
			line-height: 70rpx;
			// background: linear-gradient(93deg, rgba(241, 192, 114, 1.0), rgba(231, 174, 96, 1.0));
			// box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
			font-size: 28rpx;
		
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
		}

		.seckilled-btn {
			width: 432rpx;
			line-height: 70rpx;
			background: rgba(221, 221, 221, 1);
			font-size: 28rpx;

			font-weight: 500;
			color: #999999;
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
		}

		.groupon-btn {
			width: 210rpx;
			height: 70rpx;
			background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
			border-radius: 35rpx;
		}
	}
}
</style>
